<link rel="stylesheet" href="/assets/home/css/details.css">
<!-- 加载ckplayer视频插件 -->
<script src="/assets/home/plugin/ckplayer/ckplayer.min.js"></script>


<body>
    <div id="cover">
        <!-- 课程封面 -->
        <img class="cover_bg" src="{$subject.thumbs_text}">
        <!-- 中间播放键 -->
        <div id="play">
            <img src="/assets/home/images/play.png" />
        </div>
    </div>

    <!-- ckplayer视频容器元素 -->
    <div id="video"></div>

    <!-- 课程信息 -->
    <div class="head">
        <div class="info">
            <h4 class="name">{$subject.title}</h4>
            <div class="action">
                {if condition="$subject.like_status"}
                    <!-- 点赞 -->
                    <img id="like" data-status="remove" class="thumbs"  src="/assets/home/images/thumbs-up.png" alt="">
                {else /}
                    <!-- 未点赞 -->
                    <img id="like" data-status="add" class="thumbs" src="/assets/home/images/thumbs.png" alt="">
                {/if}
                <span class="num">{$subject.likes_text}</span>
            </div>
        </div>
    </div>
    
    <div class="title">课程信息</div>
    <table class="list">
        <tr>
            <td>课程名称</td>
            <td>{$subject.title}</td>
        </tr>
        <tr class="price">
            <td>课程价格</td>
            <td>￥{$subject.price}</td>
        </tr>
        <tr>
            <td>发布时间</td>
            <td>{$subject.createtime_text}</td>
        </tr>
        <tr>
            <td>章节总数</td>
            <td>{$chapter|count}小节</td>
        </tr>
    </table>

    <div class="title">课程介绍</div>
    <div class="mui-table-view content">{$subject.content}</div>

    <div class="title">课程章节</div>
    <ul id="chapter" class="mui-table-view">
        {if condition="$chapter"}
            {foreach $chapter as $key=>$item}
                <li data-cid="{$item.id}" class=" item mui-table-view-cell">第{$key + 1}节 - {$item.title}</li>
            {/foreach}
        {else}
        <li class="mui-table-view-cell">暂无课程章节</li>
        {/if}
    </ul>


    {if condition="$comment"}
    <div class="title">用户评论</div>
    <!-- 评论内容 -->
    {foreach $comment as $item}
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left userimg" src="{$item.business.avatar_text}">
                <div class="mui-media-body">
                    {$item.business.nickname ? $item.business.nickname : '匿名'}
                    <p class='mui-ellipsis'>{$item.content}</p>
                </div>
            </a>
        </li>
    </ul>
    {/foreach}

    <div class="more">
        <a href="{:url('home/index/comment_list')}?subid={$subject.id}" class="mui-btn mui-btn-primary mui-btn-outlined">查看更多评论</a>
    </div>
    {else} 
    <li class="mui-table-view-cell mui-media">
        暂无评论
    </li>
    {/if}

    <!-- 弹出菜单 -->
    <div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a id="buy" href="javascript:void(0)">
                    立即购买
                </a>
            </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="#sheet1"><b>取消</b></a>
            </li>
        </ul>
    </div>

    {include file="common\menu"}
</body>

<script>
    var cid = 0

    var subid = `{$subject.id}`

    var player;

    $("#iosActionsheetCancel").click(function () {
        mui('#sheet1').popover('toggle');
    })

    // 点击播放
    $("#play").on('click', function () {
        $.ajax({
            url:`{:url('home/index/play')}`,
            type:'post',
            data:{subid,cid},
            dataType:'json',
            success:function(success){
                if(success.code == 0){
                    mui.toast(success.msg);
                    return false;
                }
                var data = success.data;
                if(data.hasOwnProperty('status') && data.status == "buy"){
                    mui("#sheet1").popover('toggle');
                    return false;
                }
                $("#video").css('display','block');
                $("#cover").css('display','none');

                //准备播放
                var options = {
                    container: '#video', //容器
                    video: data.url, //播放地址
                    autoplay: true,//是否自动播放
                    webFull:true,//是否启用页面全屏按钮，默认不启用
                    theatre:true,//是否启用剧场模式按钮，默认不启用
                    controls:true,//是否显示自带控制栏
                    rightBar:true,//是否开启右边控制栏
                    smallWindows:true,//是否启用小窗口模式
                    smallWindowsDrag:true,//小窗口开启时是否可以拖动
                    screenshot:true,//截图功能是否开启
                    playbackrateOpen:true,//是否开启控制栏倍速选项
	                playbackrateList:[0.75,1,1.25,1.5,2,4],//倍速配置值
                    timeScheduleAdjust:1,//是否可调节播放进度,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动
                }

                player = new ckplayer(options);//初始化播放器
            }
        })
    })

   

    $("#buy").on('click', function () {
        mui('#sheet1').popover('toggle');
        var btnArray = ['否', '是'];
        mui.confirm('请问您确认购买吗？', '尊敬的用户', btnArray, function (e) {
            if (e.index = 1) {
                $.ajax({
                    url:`{:url('home/index/buy')}`,
                    type:'post',
                    data:{subid},
                    dataType:'json',
                    success:function(success){
                        if(success.code == 0){
                            mui.toast(success.msg);
                            return false
                        }

                        mui.toast(success.msg)
                        setTimeout(()=>{
                            location.reload()
                        },1000)
                    }
                })
            }
        })
    })

    $("#chapter .item").click(function(){
        cid = $(this).data('cid')
        $(this).css('color','blue').siblings().css('color','black')

        $("#video").css('display','none');
        $("#cover").css('display','block');

        if(player){
            player.pause()
        }

    })
    //点击取消，关闭弹出菜单
    $("#iosActionsheetCancel").click(function () {
        mui('#sheet1').popover('toggle');
    })
    // 点赞
    $("#like").click(function(){
        var subid = `{$subject.id}`;

        // 获取到点赞状态
        var status = $(this).data('status');

        // 发送ajax请求
        $.ajax({
            url:`{:url('home/index/like')}`,
            type:'post',
            data:{subid,status},
            dataType:'json',
            success:function(success){
                mui.toast(success.msg,{duration:500})
                setTimeout(()=>{
                    location.reload()
                },500)
            },
            error:function(error){
                console.log(12322);
            }
        })
    })
</script>